<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>机构主页</title>
	<link rel="stylesheet" type="text/css" href="__CSS__api.css" />
	<link rel="stylesheet" type="text/css" href="__CSS__aui.css" />
	<link rel="stylesheet" type="text/css" href="__CSS__swiper.min.css">
	<style>
		.aui-bar-nav .aui-iconfont {
			position: relative;
			font-family: "aui_iconfont" !important;
			font-size: 0.75rem;
			color: #E73C5C;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			height: 2.4rem;
		}

		.aui-bar-nav {
			background:linear-gradient(to left,#D4474B 0,#C13A32 50%);
			background:-webkit-linear-gradient(to left,#D4474B 0,#C13A32 50%);
		}

		.aui-icon-tu {
			height: 2.4rem;
			width: 49px;
			background: url('__IMG__left_white.png') no-repeat 0.5rem center;
			background-size: 22px 22px;
		}

		.aui-bar-nav .aui-pull-right {
			padding-right: 0.75rem;
		}

		.aui-bar-nav .aui-title {
			font-size: 0.9rem;
			color: #333333;
			font-weight: 500;
		}
		body{
			background:#f5f5f5;

		}
		.head{
			width:100%;
			height:4rem;
			background:linear-gradient(to left,#D4474B 0,#C13A32 50%);
			background:-webkit-linear-gradient(to left,#D4474B 0,#C13A32 50%);
		}
		.info{
			width:100%;
			background:#fff;
			padding:2.4rem 0.7rem 0.9rem 0.7rem;
			margin-bottom:0.5rem;
			position:relative;
		}
		.logo{
			width:4.5rem;
			height:4.5rem;
			line-height:4.5rem;
			border-radius:50%;
			background:rgba(255,255,255,1);
			box-shadow:0px 1px 6px rgba(230,227,227,1);
			color:#E62938;
			font-size:0.75rem;
			font-weight:500;
			text-align:center;
			position: absolute;
			left: 0;
			right: 0;
			top:-50px;
			/*top: -120%;*/
			/*bottom: 0;*/
			margin:auto;
			z-index:2;
			overflow: hidden;
		}
		.yuan{
			width:6rem;
			height:6rem;
			border-radius:50%;
			background:#fff;
			position: absolute;
			left: 0;
			right: 0;
			top:-68%;
			bottom: 0;
			margin:auto;
			z-index:1;
		}
		.title{
			font-size:0.8rem;
			color:#333;
			position:absolute;
			top:2.4rem;
			left:0;
			width: 100%;
			text-align: center;
			font-weight:500;
			text-align:center;
			z-index:3;
		}
		.content{
			font-size:0.75rem;
			color:#666;
			margin-top:1.8rem;
		}
		.service{
			width:100%;
			background:#fff;
			padding:0 0.7rem;
		}
		.serviceInfo{
			height:2.45rem;
			line-height:2.45rem;
			font-size:0.75rem;
			display: flex;
			justify-content: space-between;
		}
		.serviceHour{
			color:#999;
		}
		.serviceData{
			color:#333
		}
		.underLine{
			border: none;
			background-size: 100% 1px;
			background-repeat: no-repeat;
			background-position: bottom;
			background-image: linear-gradient(0,#EDEDED,#EDEDED 50%,transparent 50%);
			background-image: -webkit-linear-gradient(90deg,#EDEDED,#EDEDED 50%,transparent 50%);
		}
		.serviceImg{
			background:#fff;
			padding:1rem 0 0.75rem 0.7rem;
			margin-bottom:0.5rem;
		}
		.activityName{
			color:#333;
			font-size:0.85rem;
			font-weight:500;
			padding-bottom:0.75rem;
		}
		.activityName1{
			color:#333;
			font-size:0.85rem;
			font-weight:500;
		}
		.swiper-container{
			width:100%;
			height:5.95rem;
		}
		.swiper-slide{
			width:50%;
			height:5.95rem;
			margin-right:0.5rem;
		}
		.swiperImg{
			width:100%;
			height:100%;
		}
		.activity{
			padding:1rem 0.7rem 0 0.7rem;
			background:#fff;
		}
		.activityImg{
			width:4.825rem;
			height:4.825rem;
			margin-right:0.8rem;
			border-radius:0.25rem;
		}
		.showImg{
			width:100%;
			height:100%;
			border-radius:0.25rem;
		}
		.activityContent{
			height:4.825rem;
			position:relative;
		}
		.activityTitle{
			color:#333;
			font-size:0.8rem;
			margin-bottom:0.2rem;
		}
		.box{
			margin-bottom:0.25rem;
			height:0.65rem;
			display: flex;
			align-items: center;
		}
		.destination,.activityTime{
			color:#999;
			font-size:0.65rem;
		}
		.logo1{
			width:0.65rem;
			height:0.65rem;
			background: url(__IMG__location.png) no-repeat center center;
			background-size:100% 100%;
			margin-right:0.2rem;
		}
		.logo2{
			width:0.65rem;
			height:0.65rem;
			background: url(__IMG__clock.png) no-repeat center center;
			background-size:100% 100%;
			margin-right:0.2rem;
		}
		.report{
			width:100%;
			height:1.95rem;
			position:absolute;
			bottom:0;
		}
        .reportDetail {
            position: relative;
            color: #ccc;
            font-size: 0.5rem;
            padding: 0.15rem 0.25rem;
            padding-bottom: 0.05rem;
            max-width:5rem;
            height:1rem;
            /*display: inline-block;*/
            float: left;
            margin-top: 1.1rem;
        }

        .reportDetail:after {
            width: 198%;
            height: 190%;
            position: absolute;
            top: -48%;
            left: -50%;
            content: "";
            border: 1px solid #E6E6E6;
            border-radius: 0.4rem;
            -ms-transform: scale(0.5);
            /* IE 9 */
            -moz-transform: scale(0.5);
            /* Firefox */
            -webkit-transform: scale(0.5);
            -o-transform: scale(0.5);
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            word-wrap: break-word;
            word-break: break-all;
            white-space: normal !important;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
        }

		.signUp{
			text-align: right;
			font-size:0.65rem;
			color:#FFBA71;
			padding-top:1.1rem;
			float:right
		}
		.xian{
			width:0.75rem;
			height:0.75rem;

			display:inline-block;
			vertical-align: middle;
		}
		.moreActivity{
			width:100%;
			height:2.7rem;
			line-height: 2.7rem;
			color:#999;
			font-size:0.7rem;
			text-align: center;
		}
		.juli{
			margin-bottom:0.5rem;
		}
		.activityDetails{
			padding:0.75rem 0.55rem 0.75rem 0;
		}
	</style>
</head>

<body>
<header class="aui-bar aui-bar-nav" style="padding-top:25px;background-color:#C81300;" id="header">
	<a class="aui-pull-left" tapmode="active" onclick="history.go(-1)"> <span class="aui-iconfont aui-icon-tu"> </span> </a>
</header>
<div class="head"></div>
<div class="info">
	<div class="logo">
		<img src="{$info.mechanism_logo}" alt="">
	</div>
	<!--<div class="yuan"></div>-->
	<div class="title">{$info.mechanism_name}</div>
	<div class="content">{$info.mechanism_intro}</div>
</div>
<div class="service">
	<div class="serviceInfo underLine">
		<div class="serviceHour">累计服务时长</div>
		<div class="serviceData">{$info.activityTime}h</div>
	</div>
	<div class="serviceInfo underLine">
		<div class="serviceHour">累计服务次数</div>
		<div class="serviceData">{$info.num}次</div>
	</div>
	<div class="serviceInfo juli">
		<div class="serviceHour">最优服务类型</div>
		<div class="serviceData">{$info.typeName} &nbsp;({$info.maxNum}次)</div>
	</div>
</div>
<div class="serviceImg">
	<div class="activityName">机构风采</div>
	<div class="swiper-container">
		<div class="swiper-wrapper" >
			{if (!empty($list))}
			{volist name='list' id='vo'}
			<div class="swiper-slide" onclick="fnBig(this)" tapmode='active' data-id="{$info.mechanism_id}">
				<img src="{$vo.mien_url}" class="swiperImg"/>
			</div>
			{/volist}
			{/if}
		</div>
	</div>
</div>
<div class="activity">
	<div class="activityName1">机构活动</div>
	{if(!empty($lists))}
	{volist name='lists' id='va'}
	<div class="activityDetails flex-wrap underLine" onclick="fnActive(this)" tapmode='active' data-id="{$va.id}">
		<div class="activityImg"><img src="{$va.activity_img}" class="showImg"></div>
		<div class="activityContent flex-con">
			<div class="activityTitle aui-ellipsis-1">{$va.activity_name}</div>
			<div class="box">
				<div class="logo1"></div>
				<div class="destination aui-ellipsis-1">{$va.activity_address}</div>
			</div>
			<div class="box">
				<div class="logo2"></div>
				<div class="activityTime aui-ellipsis-1">{$va.activity_start_time}至{$va.activity_end_time}</div>
			</div>

			<div class="report">
				<div class="reportDetail aui-ellipsis-1">{$va.activity_type_name}</div>
				<div class="signUp">
					<img src="__IMG__xian.png" alt="" class="xian"><span>
					{if $va.activity_status == 1}
                    报名未开始
                    {/if}
                    {if $va.activity_status == 2}
                    报名中
                    {/if}
                    {if $va.activity_status == 3}
                    进行中
                    {/if}
                    {if $va.activity_status == 4}
                    已结束
                    {/if}
					{if $va.activity_status == 5}
                    活动未开始
                    {/if}
				</span>
				</div>
			</div>
		</div>
	</div>
	{/volist}
	{/if}
</div>
{if (count($lists)==10)}
<div class="moreActivity" onclick="fnMore(this)" tapmode='active' data-id="{$info.mechanism_id}">查看更多活动</div>
{/if}

</body>
<script type="text/javascript" src="__JS__api.js"></script>
<script type="text/javascript" src="__JS__tt.js"></script>
<script type="text/javascript" src="__JS__swiper.min.js"></script>
<script type="text/javascript">
	window.onload = function(){
		var swiper = new Swiper('.swiper-container', {
			slidesPerView: 'auto',
			// spaceBetween: 20,
			loop: true,
			autoplay: 3000,
			autoplayDisableOnInteraction: false,
			pagination: '.swiper-pagination',
		});
	};
	//活动详情
	function fnActive(el) {
		var activity_id =$api.attr(el,'data-id');
		location.href='{:url("First/activitydatail")}?activity_id=' + activity_id;
	}
	//查看更多活动列表
	function fnMore(el) {
		var mechanism_id =$api.attr(el,'data-id');
		location.href='{:url("Mechanism/mechanismActivity")}?mechanism_id=' + mechanism_id;
	}

	//机构风采
	function fnBig(el){
		var mechanism_id =$api.attr(el,'data-id');
		location.href='{:url("Mechanism/mecMien")}?mechanism_id=' + mechanism_id;
	}

//    //只数显示
//    function getChangeName(key){
//        var activity_name = $
//        if(key.length>7&&key!=''){
//            return key.substring(0,7)+".."
//        }else{
//            return key
//        }
//    }
</script>

</html>
